<stbui-base-layout>

  <div class="user-container mat-elevation-z4">

    <mat-sidenav-container>
      <mat-sidenav class="mat-elevation-z2" mode="side" [opened]="sideOpen">

        <mat-nav-list class="nav-list">
          <h3 mat-subheader>
            <span>用户权限</span>
            <span fxFlex></span>
            <button mat-icon-button (click)="onSideTriggered()">
              <mat-icon>menu</mat-icon>
            </button>
          </h3>
          <a class="nav-item" mat-list-item>
            <h3 class="nav-title" mat-line>
              <mat-icon class="icon">mail</mat-icon>
              <span class="text">管理员 (1)</span>
            </h3>
          </a>
          <a class="nav-item" mat-list-item>
            <h3 class="nav-title" mat-line>
              <mat-icon class="icon">group</mat-icon>
              <span class="text">普通用户 ({{users.length}})</span>
            </h3>
          </a>
          <mat-divider></mat-divider>
          <a class="nav-item" mat-list-item>
            <h3 class="nav-title" mat-line>
              <mat-icon class="icon">local_offer</mat-icon>
              <span class="text">标签用户 </span>
            </h3>
          </a>
        </mat-nav-list>

      </mat-sidenav>

      <div class="content-container p-10">
        <div class="toolbar mat-elevation-z2" fxLayout="row" fxLayoutAlign="start center" [ngClass]="{'show': checked}">
          <button mat-icon-button>
            <mat-icon>delete</mat-icon>
          </button>
        </div>

        <table class="table table-hover">
          <thead>
          <tr>
            <th>
              <mat-checkbox class="checkbox" [(ngModel)]="checked"></mat-checkbox>
            </th>
            <th>账号</th>
            <th>最后登录时间</th>
            <th>最后登录IP</th>
            <th>登录次数</th>
            <th>状态</th>
            <th>管理操作</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let user of users" (click)="onEditTriggered(user)">
            <td>
              <mat-checkbox class="checkbox" [checked]="checked"></mat-checkbox>
            </td>
            <td>{{ user.loginName }}</td>
            <td>{{ user.lastLoginTime }}</td>
            <td>{{ user.lastLoginIp }}</td>
            <td>{{ user.loginCount }}</td>
            <td>{{ user.state }}</td>
            <td>
              <button mat-icon-button (click)="onDeleteTriggered(user)">
                <mat-icon>delete</mat-icon>
              </button>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </mat-sidenav-container>

  </div>

</stbui-base-layout>
